﻿<section class="home-css-frameworks" id="home-css-frameworks-section">
    <Row>
        <Column ColumnSize="ColumnSize.Is12" TextAlignment="TextAlignment.Center" Padding="Padding.Is5.FromBottom">
            <Heading Size="HeadingSize.Is2" TextSize="TextSize.Heading1" TextWeight="TextWeight.Bold" Padding="Padding.Is3.FromBottom">
                One library. <Span Class="gradient-commercial">Every CSS framework</Span>.
            </Heading>
            <Heading Size="HeadingSize.Is5" TextWeight="TextWeight.Normal" TextColor="TextColor.Muted">
                Blazorise is the <Strong>only Blazor UI library</Strong> that works seamlessly across multiple CSS frameworks, all in pure C#.
                We intelligently render the exact HTML and CSS each framework requires, giving you freedom of choice without lock-in.
            </Heading>
        </Column>
    </Row>
    <Grid>
        <Column ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Flex="Flex.Column" Border="Border.Is1.Rounded">
            <Anchor To="docs/usage/fluent2" Title="Link to Fluent 2">
                <Div Margin="Margin.Is3.FromTop.Is4.OnX">
                    <Image Source="_content/Blazorise.Docs/assets/img/logos/fluent2.svg" Text="Fluent 2" Style="height: 2rem;" />
                </Div>
                <Div Padding="Padding.Is3">
                    <Paragraph TextSize="TextSize.Large" TextWeight="TextWeight.Bold" Margin="Margin.Is1.FromBottom">Fluent 2</Paragraph>
                    <Paragraph>
                        Create modern Microsoft-inspired experiences with Fluent 2 design.
                    </Paragraph>
                </Div>
            </Anchor>
        </Column>
        <Column ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Flex="Flex.Column" Border="Border.Is1.Rounded">
            <Anchor To="docs/usage/tailwind" Title="Link to Tailwind">
                <Div Margin="Margin.Is3.FromTop.Is4.OnX">
                    <Image Source="_content/Blazorise.Docs/assets/img/logos/tailwind.svg" Text="Tailwind" Style="width: 2rem; height: 2rem;" />
                </Div>
                <Div Padding="Padding.Is3">
                    <Paragraph TextSize="TextSize.Large" TextWeight="TextWeight.Bold" Margin="Margin.Is1.FromBottom">Tailwind</Paragraph>
                    <Paragraph>
                        Harness the power of a utility-first framework for rapid, consistent UI.
                    </Paragraph>
                </Div>
            </Anchor>
        </Column>
        <Column ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Flex="Flex.Column" Border="Border.Is1.Rounded">
            <Anchor To="docs/usage/bootstrap5" Title="Link to Bootstrap 5">
                <Div Margin="Margin.Is3.FromTop.Is4.OnX">
                    <Image Source="_content/Blazorise.Docs/assets/img/logos/bootstrap-5.svg" Text="Bootstrap 5" Style="width: 2rem; height: 2rem;" />
                </Div>
                <Div Padding="Padding.Is3">
                    <Paragraph TextSize="TextSize.Large" TextWeight="TextWeight.Bold" Margin="Margin.Is1.FromBottom">Bootstrap 5</Paragraph>
                    <Paragraph>
                        The most popular frontend toolkit, rebuilt with Blazorise flexibility.
                    </Paragraph>
                </Div>
            </Anchor>
        </Column>
        <Column ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Flex="Flex.Column" Border="Border.Is1.Rounded">
            <Anchor To="docs/usage/bootstrap4" Title="Link to Bootstrap 4">
                <Div Margin="Margin.Is3.FromTop.Is4.OnX">
                    <Image Source="_content/Blazorise.Docs/assets/img/logos/bootstrap-4.svg" Text="Bootstrap 4" Style="width: 2rem; height: 2rem;" />
                </Div>
                <Div Padding="Padding.Is3">
                    <Paragraph TextSize="TextSize.Large" TextWeight="TextWeight.Bold" Margin="Margin.Is1.FromBottom">Bootstrap 4</Paragraph>
                    <Paragraph>
                        The classic, responsive framework that powers countless web apps.
                    </Paragraph>
                </Div>
            </Anchor>
        </Column>
        <Column ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Flex="Flex.Column" Border="Border.Is1.Rounded">
            <Anchor To="docs/usage/bulma" Title="Link to Bulma">
                <Div Margin="Margin.Is3.FromTop.Is4.OnX">
                    <Image Source="_content/Blazorise.Docs/assets/img/logos/bulma-small.svg" Text="Bulma" Style="width: 2rem; height: 2rem;" />
                </Div>
                <Div Padding="Padding.Is3">
                    <Paragraph TextSize="TextSize.Large" TextWeight="TextWeight.Bold" Margin="Margin.Is1.FromBottom">Bulma</Paragraph>
                    <Paragraph>
                        Lightweight, modern, and built entirely with Flexbox simplicity.
                    </Paragraph>
                </Div>
            </Anchor>
        </Column>
        <Column ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Flex="Flex.Column" Border="Border.Is1.Rounded">
            <Anchor To="docs/usage/material" Title="Link to Material">
                <Div Margin="Margin.Is3.FromTop.Is4.OnX">
                    <Image Source="_content/Blazorise.Docs/assets/img/logos/material.svg" Text="Material" Style="width: 2rem; height: 2rem;" />
                </Div>
                <Div Padding="Padding.Is3">
                    <Paragraph TextSize="TextSize.Large" TextWeight="TextWeight.Bold" Margin="Margin.Is1.FromBottom">Material</Paragraph>
                    <Paragraph>
                        Google's Material Design language brought to life in Blazorise.
                    </Paragraph>
                </Div>
            </Anchor>
        </Column>
    </Grid>
</section>